<template>
    <div class="login">
        <el-card shadow="hover" class="login_box">
            <template slot="header">
                登录系统
            </template>

            <el-form :model="loginForm">
                <el-form-item>
                    <el-input
                        v-model="loginForm.username"
                        placeholder="请输入用户名"
                    ></el-input>
                </el-form-item>

                <el-form-item>
                    <el-input
                        v-model="loginForm.password"
                        placeholder="请输入密码"
                        show-password
                    ></el-input>
                </el-form-item>
            </el-form>

            <el-button type="success" @click="login">登录</el-button>
            <el-row type="flex" justify="end">
                <el-link @click.prevent="goRegister"
                    >没有账号？去注册吧</el-link
                >
            </el-row>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            loginForm: {
                username: "",
                password: "",
            },
        };
    },
    methods: {
        goRegister() {
            this.$router.push("/register");
        },
        async login() {
            if (!this.loginForm.username && !this.loginForm.password) {
                this.$notify.error("用户密码不能为空");
                return;
            }
            // console.log(this.loginForm);
            const res = await this.$http.post("/login", this.loginForm);
            console.log("res", res);
            // 如果登录成功，我们将登录信息保存在 sessionStorage 中
            window.sessionStorage.setItem("user", "123");
            // 登录成功，跳转到后台首页（仪表盘）
            this.$router.push("/dashboard");
        },
    },
};
</script>

<style lang="less" scoped>
.login {
    height: 100%;
    background-color: #eee;
    display: flex;
    justify-content: center;
    align-items: center;

    .login_box {
        width: 450px;

        .el-button {
            width: 100%;
        }

        .el-link {
            margin-top: 15px;
        }
    }
}
</style>
